<template>
  <div class="footer-container">
    <div class="footer-item">
      <!-- <div
        class="footer-div"
        ref="divtu"
        v-for="(data, index) in datas"
        :key="data.id"
        @mouseenter="kapian(index, $event)"
        @mouseleave="leaveurl()"
      >
        <div class="footer-item-img">
          <img
            :src="data.imgUrl"
            class="img"
            :class="index === currentIndex ? 'active' : ''"
          />
        </div> -->
      <div
        class="footer-div"
        ref="divtu"
        v-for="(list, index) in lists"
        :key="list.content_id"
        @mouseenter="enter(list, $event)"
        @mouseleave="leave(list, $event)"
      >
        <div class="footer-item-img">
          <img
            src="../../image/footerll.webp"
            class="img"
            :class="
              list.game_feed.isActive ? 'ad-img-movein' : 'ad-img-moveout'
            "
          />
        </div>
        <div class="card-content">
          <div class="card-content-item">
            <div>
              <img src="../../image/footer01.webp" class="img-xiao" />
            </div>
            <div class="cart-img-text">
              <div class="cart-title-left">{{ list.game_feed.game_name }}</div>
              <div class="cart-title-rigth">{{ list.game_feed.summary }}</div>
            </div>
          </div>
          <div class="card-content-standard">
            <div class="card-content-standard-num">
              {{ list.game_feed.grade }}
            </div>
            <div>
              <div class="card-content-standard-text">
                <svg
                  t="1668233728807"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3900"
                  width="14"
                  height="14"
                >
                  <path
                    d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                    p-id="3901"
                    fill="#1296db"
                  ></path>
                </svg>
                <svg
                  t="1668233728807"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3900"
                  width="14"
                  height="14"
                >
                  <path
                    d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                    p-id="3901"
                    fill="#1296db"
                  ></path>
                </svg>
                <svg
                  t="1668233728807"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3900"
                  width="14"
                  height="14"
                >
                  <path
                    d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                    p-id="3901"
                    fill="#1296db"
                  ></path>
                </svg>
                <svg
                  t="1668233805119"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4910"
                  width="14"
                  height="14"
                >
                  <path
                    d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                    p-id="4911"
                    fill="#cdcdcd"
                  ></path>
                </svg>
                <svg
                  t="1668233805119"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4910"
                  width="14"
                  height="14"
                >
                  <path
                    d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                    p-id="4911"
                    fill="#cdcdcd"
                  ></path>
                </svg>
              </div>
              <div class="standard-text">
                {{ list.game_feed.comment_number }}人评
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="loading" v-if="isLoading" @click="isLoading = false">
        <div class="loading-div">加载更多</div>
      </div>
      <div class="loadComplete" v-else>
        <p class="loadComplete-p">你已经到达了世界的尽头</p>
      </div>
    </div>
    <!--右边 -->
    <div class="Ranking-list-right">
      <div>
        <div class="Ranking-list-right-title">
          <div class="Ranking-list-right-text">热度榜</div>
          <div class="Ranking-list-right-div">
            <a href="#">
              <span style="margin-left: 5px">更多</span>
              <span class="iconfont icon-changyongicon-"></span>
            </a>
          </div>
        </div>
        <!-- 循环 -->
        <div class="Ranking-lists-right">
          <div class="Ranking-lists-list">
            <div class="Ranking-lists">
              <div
                class="Ranking-list-item"
                v-for="(data, index) in datas"
                :key="data.game_base_id"
              >
                <div class="Ranking-lists-jianpai">
                  <div class="jiangpai">
                    <svg
                      t="1668273587365"
                      class="icon jiangpai"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="4740"
                      width="48"
                      height="90"
                      v-if="index === 0"
                    >
                      <path
                        d="M739.411672 901.766737c0-15.575579 12.611368-28.186947 28.186947-28.186948h109.756632a12.180211 12.180211 0 0 0 8.623157-20.803368l-206.578526-206.578526-82.135579-82.189474a120.562526 120.562526 0 0 0-170.496 0L344.632724 646.197895 138.054198 852.776421a12.180211 12.180211 0 0 0 8.623158 20.803368h109.756631c15.575579 0 28.186947 12.611368 28.186948 28.186948v109.756631c0 10.886737 13.123368 16.330105 20.830316 8.623158l206.578526-206.551579 206.578526 206.578527a12.180211 12.180211 0 0 0 20.803369-8.650106v-109.756631z"
                        fill="#ED2061"
                        p-id="4741"
                      ></path>
                      <path
                        d="M852.698408 346.085053c0 191.137684-154.947368 346.085053-346.085052 346.085052-191.110737 0-346.058105-154.947368-346.058105-346.085052S315.502619 0 506.586408 0c191.137684 0 346.085053 154.947368 346.085053 346.085053"
                        fill="#F9D11F"
                        p-id="4742"
                      ></path>
                      <path
                        d="M679.211251 646.009263l-81.973895-82.000842a120.535579 120.535579 0 0 0-170.469053 0L344.632724 646.197895l-3.745684 3.745684a344.387368 344.387368 0 0 0 165.753263 42.226526c62.895158 0 121.802105-16.896 172.597895-46.160842"
                        fill="#FF7E50"
                        p-id="4743"
                      ></path>
                      <path
                        d="M629.789777 346.085053a123.176421 123.176421 0 1 1-246.352842 0 123.176421 123.176421 0 0 1 246.352842 0"
                        fill="#FFFFFF"
                        p-id="4744"
                      ></path>
                    </svg>
                    <svg
                      t="1668392363639"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2992"
                      width="48"
                      height="90"
                      v-else-if="index === 1"
                    >
                      <path
                        d="M337.2 0H162.3l249.8 449.6h174.8L337.2 0z"
                        fill="#E64A19"
                        p-id="2993"
                      ></path>
                      <path
                        d="M686.8 0L437.1 449.6h174.8L861.7 0H686.8z"
                        fill="#FF754C"
                        p-id="2994"
                      ></path>
                      <path
                        d="M586.9 449.6l-1.7-3.3-1.7 3.3h3.4zM482.7 260.7l-86 160.4 27.9 54.4 87-160.6-28.9-54.2z"
                        fill="#C93D18"
                        p-id="2995"
                      ></path>
                      <path
                        d="M512 724.3m-299.7 0a299.7 299.7 0 1 0 599.4 0 299.7 299.7 0 1 0-599.4 0Z"
                        fill="#9FA8DA"
                        p-id="2996"
                      ></path>
                      <path
                        d="M487 649.4h50v149.9h-50z"
                        fill="#C5CAE9"
                        p-id="2997"
                      ></path>
                      <path
                        d="M512 974c-137.9 0-249.8-111.8-249.8-249.8S374.1 474.5 512 474.5s249.8 111.8 249.8 249.8C761.6 862.2 649.9 973.9 512 974zM387.1 799.2v50h249.8v-50h-50V649.4h50v-50H387.1v50h50v149.9h-50z"
                        fill="#C5CAE9"
                        p-id="2998"
                      ></path>
                    </svg>
                    <svg
                      t="1668392484142"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="3258"
                      width="48"
                      height="90"
                      v-else-if="index === 2"
                    >
                      <path
                        d="M337.2 0H162.3l249.8 449.6h174.8L337.2 0z"
                        fill="#E64A19"
                        p-id="3259"
                      ></path>
                      <path
                        d="M686.8 0L437.1 449.6h174.8L861.7 0H686.8z"
                        fill="#FF754C"
                        p-id="3260"
                      ></path>
                      <path
                        d="M586.9 449.6l-1.7-3.3-1.7 3.3h3.4zM482.7 260.7l-86 160.4 27.9 54.4 87-160.6-28.9-54.2z"
                        fill="#C93D18"
                        p-id="3261"
                      ></path>
                      <path
                        d="M512 724.3m-299.7 0a299.7 299.7 0 1 0 599.4 0 299.7 299.7 0 1 0-599.4 0Z"
                        fill="#AF8A77"
                        p-id="3262"
                      ></path>
                      <path
                        d="M512 974c-137.9 0-249.8-111.8-249.8-249.8S374.1 474.5 512 474.5s249.8 111.8 249.8 249.8C761.6 862.2 649.9 973.9 512 974zM337.2 799.2v50h349.7v-50h-50V649.4h50v-50H337.2v50h50v149.9h-50z"
                        fill="#CEB1A1"
                        p-id="3263"
                      ></path>
                      <path
                        d="M537 649.4h50v149.9h-50zM437.1 649.4h50v149.9h-50z"
                        fill="#CEB1A1"
                        p-id="3264"
                      ></path>
                    </svg>
                    <div class="jiangpai" v-else-if="index > 2">
                      {{ index + 1 }}
                    </div>
                  </div>
                </div>
                <div class="jiangpai-lists-item">
                  <div>
                    <img
                      src="../../image/lunxiao003.webp"
                      class="jiangpai-lists-item-img"
                    />
                  </div>
                  <div class="rigth-nameList">
                    <div>
                      <div class="rigth-name">{{ data.game_name }}</div>
                    </div>
                    <div class="jiangpai-tag">
                      <div
                        v-for="(tag, index) in data.tag_list"
                        :key="tag.tag_id"
                      >
                        <span class="jiangpai-tagtext" v-if="index <= 2">{{
                          tag.name
                        }}</span>
                      </div>
                    </div>
                    <div class="jiangpai-svg">
                      <div class="jiangpai-svg-tubiao">
                        <svg
                          t="1668276151932"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="6499"
                          width="12"
                          height="12"
                        >
                          <path
                            d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                            p-id="6500"
                            fill="#8a8a8a"
                          ></path>
                        </svg>
                        <svg
                          t="1668276151932"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="6499"
                          width="12"
                          height="12"
                        >
                          <path
                            d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                            p-id="6500"
                            fill="#8a8a8a"
                          ></path>
                        </svg>
                        <svg
                          t="1668276151932"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="6499"
                          width="12"
                          height="12"
                        >
                          <path
                            d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                            p-id="6500"
                            fill="#8a8a8a"
                          ></path>
                        </svg>
                        <svg
                          t="1668276003014"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="6043"
                          width="12"
                          height="12"
                        >
                          <path
                            d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                            p-id="6044"
                            fill="#dbdbdb"
                          ></path>
                        </svg>
                        <svg
                          t="1668276003014"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="6043"
                          width="12"
                          height="12"
                        >
                          <path
                            d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                            p-id="6044"
                            fill="#dbdbdb"
                          ></path>
                        </svg>
                      </div>
                      <div class="jiangpai-svg-num">
                        <span>{{ data.grade }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- tag -->
        <div>
          <div class="Ranking-list-right-title">
            <div class="Ranking-list-right-text">分类</div>
            <div class="Ranking-list-right-div">
              <a href="#">
                <span class="icon-text" style="margin-left: 5px">更多</span>
                <span class="iconfont icon-changyongicon-"></span>
              </a>
            </div>
          </div>
          <div class="classify-list">
            <ul class="ul">
              <li
                class="li"
                v-for="classify in classifylist"
                :key="classify.tag_id"
              >
                {{ classify.name }}
              </li>
            </ul>
          </div>
        </div>
        <!-- 热门活动 -->
        <div>
          <div class="Ranking-list-right-title">
            <div class="Ranking-list-right-text">热门活动</div>
            <div class="pro-list-right-div" style="margin-top: 6px">
              <div class="icon-div left">
                <a href="#">
                  <span style="margin-right: 5px">换一换</span>
                  <span class="iconfont icon-huanyihuan"></span>
                </a>
              </div>
              <div class="icon-div">
                <a href="#">
                  <span style="margin-left: 5px">更多</span>
                  <span class="iconfont icon-changyongicon-"></span>
                </a>
              </div>
            </div>
          </div>
          <div class="pro-list-content">
            <ul>
              <li
                class="proli"
                v-for="popular in popularList"
                :key="popular.game_base_id"
              >
                <img src="../../image/pro.webp" class="proimg" />
                <p class="proOneP">
                  <a href="#">{{ popular.title }}</a>
                  <span class="proOneSpan">进行中</span>
                </p>
                <p class="proTweP">
                  {{ popular.begin_time }}~{{ popular.end_time }}
                </p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 端游 -->
        <div>
          <div class="Ranking-list-right-title">
            <div class="Ranking-list-right-text">端游</div>
            <div class="Ranking-list-right-div">
              <a href="#">
                <span class="icon-text" style="margin-left: 5px">更多</span>
                <span class="iconfont icon-changyongicon-"></span>
              </a>
            </div>
          </div>
          <div style="margin-top: 10px; margin-bottom: 30px">
            <ul>
              <li
                class="gameli"
                v-for="clientGame in clientGameList"
                :key="clientGame.game_base_id"
              >
                <img src="../../image/dy.webp" class="proimg" />
                <div class="client-Game">
                  <div class="client-Gametext">{{ clientGame.game_name }}</div>
                  <div class="client-Game-num">
                    <svg
                      t="1668233728807"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="3900"
                      width="14"
                      height="14"
                    >
                      <path
                        d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                        p-id="3901"
                        fill="#1296db"
                      ></path>
                    </svg>
                    <span class="client-Game-num">{{ clientGame.grade }}</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 开测表 -->
        <div>
          <div class="Ranking-list-right-title">
            <div class="Ranking-list-right-text">开测表</div>
            <div class="Ranking-list-right-div">
              <a href="#">
                <span class="icon-text" style="margin-left: 5px">更多</span>
                <span class="iconfont icon-changyongicon-"></span>
              </a>
            </div>
          </div>
          <div
            class="OpenTestTable-container"
            v-for="OpenTestTable in OpenTestTableList"
            :key="OpenTestTable.id"
          >
            <div class="OpenTestTable-list">
              <div class="OpenTestTable-list-title">
                <svg
                  t="1668299725750"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2968"
                  width="20"
                  height="20"
                >
                  <path
                    d="M511.913993 63.989249c-247.012263 0-447.924744 200.912481-447.924744 447.924744s200.912481 447.924744 447.924744 447.924744 447.924744-200.912481 447.924744-447.924744S758.926256 63.989249 511.913993 63.989249zM511.913993 895.677474c-211.577356 0-383.763481-172.186125-383.763481-383.763481 0-211.577356 172.014111-383.763481 383.763481-383.763481s383.763481 172.014111 383.763481 383.763481S723.491349 895.677474 511.913993 895.677474z"
                    p-id="2969"
                    fill="#1296db"
                  ></path>
                  <path
                    d="M672.05913 511.913993l-159.973123 0L512.086007 288.123635c0-17.717453-14.277171-32.166639-31.994625-32.166639-17.717453 0-31.994625 14.449185-31.994625 32.166639l0 255.956996c0 17.717453 14.277171 31.994625 31.994625 31.994625l191.967747 0c17.717453 0 32.166639-14.277171 32.166639-31.994625C704.053754 526.191164 689.604569 511.913993 672.05913 511.913993z"
                    p-id="2970"
                    fill="#1296db"
                  ></path>
                </svg>
                <span class="data-open">{{
                  OpenTestTable[0].time.split("/")[0]
                }}</span>
                <span class="data-game"
                  >{{ OpenTestTable.length }}款游戏开测</span
                >
              </div>
              <div
                class="OpenTestTable-item"
                v-for="Table in OpenTestTable"
                :key="Table.id"
              >
                <div class="OpenTestTable-item-left">
                  <img
                    src="../../image/lunxiao01.webp"
                    class="OpenTestTable-item-left-img"
                  />
                </div>
                <div class="OpenTestTable-item-rigth">
                  <div>
                    <div class="OpenTestTable-item-rigth-one">
                      <a
                        ><span>{{ Table.name }}</span>
                      </a>
                    </div>
                  </div>
                  <div class="OpenTestTable-comment">评论</div>
                  <div class="OpenTestTable-time">
                    <span>{{ Table.time }}</span>
                    <!-- <span class="OpenTestTable-datatime">10-10</span> -->
                    <span class="OpenTestTable-lastSpan">{{ Table.type }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "FooTer",
  data() {
    return {
      page_num: 1,
      page_size: 10,
      ranking_type: 1,
      lists: [],
      datas: [],
      tagList: [],
      classifylist: [], //分类
      popularList: [],
      currentIndex: 0,
      move: false,
      //热门活动/
      pageSize: 2,
      //端游
      clientGameList: [],
      //开测表
      tbpage_size: 20,
      fix_page_num: 2,
      OpenTestTableList: [],
      //加载图片显示
      isLoading: true,
    };
  },
  mounted() {
    this.getMyList(this.page_num, this.page_size);
    this.getRankList(this.ranking_type, this.page_num, this.page_size);
    this.getclassifylist(this.page_num, this.page_size);
    this.getpopularList(this.page_num, this.pageSize);
    this.getclientGameList(this.page_num, this.pageSize);
    this.getOpenTestTable(this.page_num, this.tbpage_size, this.fix_page_num);
  },
  methods: {
    // left-tu
    async getMyList(page_num, page_size) {
      const result = await axios.get(
        `/pc/game/home/page_feed?page_num=${page_num}&page_size=${page_size}`
      );
      // console.log(result.data.data);
      this.lists = result.data.data;
    },
    // 热度榜
    async getRankList(ranking_type, page_num, page_size) {
      const result = await axios.get(
        `/pc/game/ranking/page_ranking_list?ranking_type=${ranking_type}&page_num=${page_num}&page_size=${page_size}`
      );
      //  console.log(result.data.data.hot_list);
      this.datas = result.data.data.hot_list.splice(0, 5);

      // let sortList = result.data.data.hot_list.map((item) => {
      //   return item.grade.sort();
      // });
      // this.datas = sortList.reverse.splice(0, 5);
      // console.log(this.datas);
      // console.log(this.tagList);
    },
    //分类
    async getclassifylist() {
      const result = await axios.get("/pc/game/tag/get_category_list");
      // console.log(result.data.data);
      this.classifylist = result.data.data.splice(0, 10);
      // console.log(this.classifylist);
    },
    //热门活动
    async getpopularList(page_num, pageSize) {
      const result = await axios.get(
        `/pc/game/home/activity_list?page_num=${page_num}&page_size=${pageSize}`
      );
      // console.log(result.data.data);
      this.popularList = result.data.data;
      // console.log(this.popularList);
    },
    //端游
    async getclientGameList(page_num, pageSize) {
      const result = await axios.get(
        `/pc/game/home/client_game?page_num=${page_num}&page_size=${pageSize}`
      );
      // console.log(result.data.data);
      this.clientGameList = result.data.data;
      // console.log(this.clientGameList);
    },
    //开测表
    test() {
      [
        {
          time: "",
          list: [],
        },
        {
          list: [],
        },
        {
          list: [],
        },
      ];
    },
    async getOpenTestTable(page_num, tbpage_size, fix_page_num) {
      const result = await axios.get(
        `/pc/game/ranking/page_start_test_list?page_num=${page_num}&page_size=${tbpage_size}&x-fix-page-num=${fix_page_num}`
      );
      console.log(result.data.data);

      let TableList = result.data.data.map((item) => {
        return {
          id: item.game_base_id,
          name: item.game_name,
          type: item.start_test_type,
          time: this.shijianc(Number(item.start_test_time)),
        };
      });
      let TableListone = TableList.slice(0, 2);
      let TableListtwo = TableList.slice(2, 4);
      let TableListthree = TableList.slice(4, 5);
      this.OpenTestTableList = [TableListone, TableListtwo, TableListthree];

      console.log(this.OpenTestTableList, "4444444");
    },
    enter(list) {
      this.lists.forEach((item) => {
        this.$set(item.game_feed, "isActive", false);
        if (list.game_feed.game_base_id === item.game_feed.game_base_id) {
          this.$set(item.game_feed, "isActive", true);
        }
      });
    },
    leave() {
      this.lists.forEach((item) => {
        this.$set(item.game_feed, "isActive", false);
      });
    },
    shijianc(time) {
      let date = new Date(time);

      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "/";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();

      return M + D + h + m;
    },
  },

  // computed: {
  //   fullTime() {
  //     return this.OpenTestTableList.map((item) => {
  //       return item[0].time.split("/")[0];
  //     });
  //   },
  // },
  // watch: {
  //   OpenTestTableList: {
  //     handler(newVal) {
  //       if (newVal) {
  //         this.fullTime = newVal.map((item) => {
  //           item[0].time.slice("-")[0];
  //         });
  //       }
  //     },
  //   },
  // },
};
</script>

<style lang="less" scoped>
.ad-img-movein {
  transition: all 0.5s;
  transform: scale(1.1);
}
.ad-img-moveout {
  transition: all 0.5s;
  transform: scale(1);
}
.footer-container {
  display: flex;
  width: 1160px;
  height: 2633px;
  margin: 0 auto;
  margin-top: 60px;
  justify-content: space-between;
}
.footer-item {
  cursor: pointer;
  margin-bottom: 20px;
  width: 750px;
  height: 376px;
  border-radius: 10px;
  margin-top: 10px;
}
.footer-div {
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 26px;
  border-radius: 10px;
}

.footer-item-img {
  width: 100%;
  height: 280px;
  background: #f2f2f2 url("../../image/ic_pc.svg") no-repeat;
  background-size: 20%;
  background-position: 50%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}
.img {
  width: 100%;
}

.card-content {
  width: 100%;
  height: 96px;
  box-sizing: border-box;
  padding: 16px 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.img-xiao {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border-radius: 10px;
}
.card-content-item {
  display: flex;
  width: 556px;
  height: 60px;
}
.cart-img-text {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.cart-title-left {
  padding: 2px 0 4px;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.85);
  width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-title-rigth {
  width: 420px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  padding-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 22px;
  line-height: 22px;
}
.card-content-standard {
  display: flex;
  align-items: center;
}
.card-content-standard-num {
  font-size: 36px;
  height: 44px;
  line-height: 44px;
  color: rgba(0, 0, 0, 0.85);
  margin-right: 10px;
  letter-spacing: -1px;
  font-weight: 400;
}
.card-content-standard-text {
  display: flex;
  align-items: center;
  white-space: nowrap;
  line-height: normal;
  margin: 5px;
}
.standard-text {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.35);
  height: 20px;
  line-height: 20px;
  margin-left: 5px;
}
.loading {
  width: 750px;
  height: 190px;
  padding: 40px 0 100px;
  box-sizing: border-box;
}

.loadComplete {
  width: 585px;
  height: 112px;
  margin: 100px auto 0;
  background: url(../../image/loaded.1ac3f53.png);
  background-size: 100%;
  position: relative;
}
.loadComplete-p {
  position: absolute;
  top: 50px;
  left: 50%;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.35);
  margin: -20px 0 0 -55px;
}
.loading-div {
  width: 300px;
  height: 50px;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.Ranking-list-right {
  width: 350px;
  margin-left: 60px;
  margin-top: 30px;
}
Ranking-list-right-div a {
  display: flex;
  height: 100%;
  width: 48px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.6);
}

.Ranking-list-right-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.Ranking-list-right-div {
  height: 22px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  border: 1px solid #dadee6;
  cursor: pointer;
  text-align: center;
}
.Ranking-list-right-div :hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.Ranking-list {
  width: 310px;
  height: 450px;
  display: flex;
  justify-content: start;
}
.Ranking-list-item {
  display: flex;
  margin-top: 10px;
}
.Ranking-list-right-text {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
  line-height: 32px;
}
.Ranking-lists-right {
  margin-bottom: 40px;
  margin-top: 20px;
}
.Ranking-lists-item {
  width: 350px;
  height: 90px;
}
.jiangpai {
  width: 48px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.35);
}

.jiangpai-lists-item {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  margin-left: 5px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.jiangpai-lists-item-img {
  width: 60px;
  height: 60px;
  border-radius: 14px;
}
.jiangpai-tag {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.35);
  height: 22px;
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.jiangpai-tagtext {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 0 none;
  padding: 0 6px 0 4px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  margin: 0 6px;
  line-height: 22px;
  height: 22px;
  position: relative;
  box-sizing: border-box;
  border-color: rgba(0, 0, 0, 0.1);
}
.jiangpai-tagtext:before {
  content: "";
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-color: inherit;
  top: 50%;
  transform: translateY(-50%) rotate(50deg) skew(10deg);
  left: -7px;
  box-sizing: border-box;
  border-bottom-left-radius: 4px;
}
.rigth-nameList {
  margin: 8px 0 8px 16px;
  flex: 1;
}
.rigth-name {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  margin-top: -10px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 234px;
}
.jiangpai-svg {
  margin-top: 7px;
  width: 100%;
  display: flex;
}
.jiangpai-svg-tubiao {
  display: flex;
  align-items: center;
  white-space: nowrap;
  line-height: normal;
}
.jiangpai-svg-num {
  font-size: 14px;
  padding-left: 6px;
  color: rgba(0, 0, 0, 0.6);
}
.rigth-name:hover {
  border-color: #007aff;
  color: #007aff;
  cursor: pointer;
}
.jiangpai-tag :hover {
  border-color: #007aff;
  color: #007aff;
  cursor: pointer;
}
.classify-list {
  margin: 16px 0 32px 0;
}
.ul {
  display: flex;
  flex-wrap: wrap;
}
.li {
  background: #f2f4f6;
  border-radius: 6px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  text-align: center;
  line-height: 22px;
  padding: 9px 16px;
  margin: 0 8px 8px 0;
  cursor: pointer;
}
.pro-list-right-div {
  display: flex;
  align-content: center;
  width: 140px;
  height: 24px;
  justify-content: space-between;
}
.icon-div {
  line-height: 24px;
  color: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  border: 1px solid #ced3de;
}
.icon-div:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.left {
  width: 70px;
  margin-right: 10px;
  text-align: center;
}
.pro-list-content {
  margin: 16px 0 30px 0;
  width: 350px;
}
.proli {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 16px;
  width: 350px;
  height: 222px;
}
.proimg {
  width: 350px;
  height: 136px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.proOneP {
  line-height: 24px;
  padding: 16px 20px 6px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.proOneP a {
  color: rgba(0, 0, 0, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proOneSpan {
  padding: 1px 6px;
  height: 18px;
  line-height: 18px;
  border-radius: 11px;
  background: #96d997;
  font-size: 12px;
  color: #fff;
  text-align: center;
  margin-left: 6px;
}
.proTweP {
  line-height: 22px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  padding: 0 20px 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gameli {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 16px;
  width: 350px;
  height: 194px;
}
.client-Game {
  height: 57px;
  line-height: 57px;
  font-size: 18px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
.client-Gametext {
  height: 100%;
  line-height: 57px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-Game-num {
  font-family: Helvetica;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  padding: 0 4px;
}
.OpenTestTable-container {
  margin-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.OpenTestTable-list-title {
  width: 350px;
  height: 33px;
  padding: 11px 0 0;
  display: flex;
}
.data-open {
  display: inline-block;
  margin: -2px 8px 0 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
}
.data-game {
  display: flex;
  align-items: center;
  height: 22px;
  margin-top: -2px;
  color: rgba(0, 0, 0, 0.35);
}
.OpenTestTable-item {
  display: flex;
  margin-left: 25px;
  margin-bottom: 15px;
}
.OpenTestTable-item-left-img {
  height: 60px;
  width: 60px;
  border-radius: 14px;
  vertical-align: middle;
  border: none;
}
.OpenTestTable-item-rigth {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 15px;
}
.OpenTestTable-item-rigth-one {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.OpenTestTable-item-rigth-one a:hover {
  color: #007aff;
}

.OpenTestTable-comment {
  height: 22px;
  margin-top: 4px;
  color: rgba(0, 0, 0, 0.35);
}
.OpenTestTable-time {
  font-size: 12px;
  color: #98a2ab;
  margin: -3px 0;
}
.OpenTestTable-datatime {
  display: inline-block;
  margin: 0 5px;
}
.OpenTestTable-lastSpan {
  color: #007aff;
  margin-left: 10px;
}
</style>
